<template>
  <div class="container-body organization-manage">
    <div class="kong" v-if="video == ''">
      <div class="kongitem"></div>
      <div class="kongnav">
        <img src="../../assets/img/live.png" alt="" class="live" />
        <span class="novideo">{{ $t('message.lang33') }}</span>
      </div>
    </div>
    <video controls height="260" class="videoview" v-else :src="video" />
    <div class="list__wrapper">
      <div class="shai">
        <div class="placement-list">
          <div class="item is-active">{{ $t('message.lang34') }}</div>
          <div class="item">{{ $t('message.lang34') }}</div>
        </div>
      </div>
      <div class="shailist">
        <div class="sitem" v-for="(item, index) in 100" :key="index">
          <div class="cover">
            <div class="tag">
              <div class="dot"></div>
              <span class="dotname">{{ $t('message.lang35') }}</span>
            </div>
            <div class="time">
              02:00
            </div>
          </div>
          <div class="info">
            <span class="file-name txt">recorder_2023-10-18-11:10:14</span>
            <img src="../../assets/img/detailicon.png" alt="" class="detailicon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SystemMangeAPI } from '@/api/SystemMange';
import { baseAPI } from '@/api/base';
export default {
  name: 'OperationLog',
  components: {},
  data() {
    return {
      treeTitle: '组织架构',
      isshuju: false,
      paishedialogVisible: false, //拍摄项目
      name: '',
      value2: false,
      checkList: [this.$t('message.Producer')],
      jiweidialogVisible: false,
      spydialogVisible: false, //视频源配置
      activeName: 'second',
      islei: 3, //我的拍摄 2参与的拍摄 3我的项目 4参与的项目
      isleftzhan: false,
      isExpanded: true, // 控制是否展开的标志
      maxWidth: 300, // 最大宽度，例如600px
      isExpandedRight: true,
      userData: { name: '张三', age: 30 }, // 示例数据
      // items: [
      // 	{ name: 'Item 1', content: '这是内容1' },
      // 	{ name: 'Item 2', content: '这是内容2' },
      // 	// 更多项...
      // ],
      items: [{ name: '项目1' }, { name: '项目2' }, { name: '项目3' }],
      popovers: [false, false, false],
      activeIndex: null, // 当前激活的 popover 索引
      // video:'',
      video: 'https://task.tongtongz.top/uploads/20250414/895da4bafcb46e498abb8ad2eb305742.mp4',
    };
  },
  watch: {},
  computed: {
    containerStyle() {
      return {
        width: this.isExpanded ? `${this.maxWidth}px` : '0px', // 根据isExpanded的值动态设置宽度
      };
    },
  },
  mounted() {},
  onHide() {},
  beforeDestroy() {},
  beforeUnmount() {},
  methods: {
    handleClose(e) {
      if (e == 1) {
        this.paishedialogVisible = false;
      } else if (e == 2) {
        this.jiweidialogVisible = false;
      } else if (e == 3) {
        this.spydialogVisible = false;
      }
    },
    handleClick(tab, event) {
      console.log(tab);
      console.log(this.activeName);
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded; // 切换展开状态
    },
    toggleExpandRight() {
      this.isExpandedRight = !this.isExpandedRight; // 切换展开状态
    },
    showPopover(data) {
      // 定义一个方法传递数据给弹窗内容
      this.$refs.popover.updatePopper(); // 确保弹窗内容更新，如果使用了v-slot:default接收数据的话，可能需要调用此方法或类似方法来触发更新。注意：Element UI的某些版本可能需要手动触发更新。具体方法可能需要根据Element UI的版本调整。例如，在某些情况下，你可能需要使用`this.$nextTick()`来确保DOM更新完成。
      // 或者在某些情况下，你可能需要手动触发更新：this.$refs.popover.doSomething(); // 根据实际情况调整方法名。例如：this.$refs.popover.$forceUpdate(); 或者其他适合的方法。具体取决于你的Element UI版本和实现细节。通常，使用`this.$nextTick()`是最简单的方法来确保DOM更新完成。例如：this.$nextTick(() => { /* 你的代码 */ });
    },
    handleClickelpop(index) {
      // this.popovers = this.popovers.map((val, i) => i === index); // 只激活当前索引的 popover，其余
      // console.log(this.popovers)
      // // this.$nextTick(() => {
      // // 	this.$refs.popover[index].doShowPopper = true; // 手动控制显示
      // // });
      // this.$refs[`popover-${index}`][index].doShow(); // 使用doShow方法显示popover，注意这里的[0]是因为el-popover实际上是一个数组，即使只有一个元素。
      // this.popovers = this.popovers.map((val, i) => i === index ? !val : false);
      // this.$nextTick(() => {
      // 	this.$refs.popover[index].doShowPopper = true; // 手动控制显示
      // });
      // this.$refs.popover[index].doShowPopper = true;
      if (this.activeIndex === index) {
        this.$refs[`popover-${index}`][index].doClose(); // 关闭当前激活的 popover
        this.activeIndex = null; // 重置激活索引
      } else {
        this.activeIndex = index; // 设置当前激活的 popover 索引
        let parms = this.items;
        for (let i in parms) {
          this.$refs[`popover-${i}`][i].doClose(); // 关闭当前激活的 popover
        }
        this.$refs[`popover-${index}`][index].doShow(); // 打开新的 popover
      }
    },
  },
};
</script>

<style scoped>
.web-container {
}
.container-body {
  height: calc(100vh - 54px);
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #30323b;
}
.rightview {
  flex: 1;
  height: 100%;
  position: relative;
  display: flex;
}
.center-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.center-col {
  display: flex;
  flex-direction: column;
}
.newleft {
  height: 100%;
  /* width: 300px; */
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  transition: width 0.4s ease;
}
.leftview {
  height: 100%;
  background-color: #1c1d24;
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  overflow-y: scroll;
}
.pone {
  height: 75px;
  background: #30323b;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 23px;
  width: 100%;
  cursor: pointer;
  position: relative;
}
.pzhan {
  height: 60px;
  background: #23242a;
  padding: 0 27px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.dian {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #0199e8;
  border-radius: 50%;
  border: 1px solid #c2c2c2;
  margin-right: 10px;
}
.icon_gd {
  width: 18px;
  height: 18px;
  margin-left: auto;
  cursor: pointer;
}
.zhanname {
  max-width: 85%;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}
.icon_ps {
  width: 24px;
  height: 24px;
  margin-right: 2px;
}
.txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.painame {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
.rpai {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.icon_px {
  margin-left: 8px;
  width: 18px;
  height: 18px;
}
.rnav {
  width: 450px;
  margin: 0 30px;
}
.img_pt {
  width: 100%;
  height: 338px;
}
.navbot {
  padding: 23px 45px;
  background: #272830;
  border-radius: 0px 0px 15px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ptit {
  font-weight: 500;
  font-size: 18px;
  color: #eeeeee;
}
.pmiao {
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  display: block;
  text-align: center;
}
.chuanbtn {
  width: 225px;
  height: 50px;
  background: #0199e8;
  border-radius: 8px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
.ritems {
  display: flex;
  flex-direction: row;
}

/* 拍摄弹窗样式开始 */
.popcj {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
  align-items: center;
}
.fang {
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  margin-right: 5px;
}
.popright {
  display: flex;
  margin-left: auto;
  flex-direction: row;
}
.huishe {
  color: #409eff;
  cursor: pointer;
}
.chamiao {
  color: #666;
  font-size: 13px;
  font-weight: normal;
  display: block;
  margin-bottom: 10px;
}
.chams {
  color: #333;
  font-size: 14px;
  font-weight: normal;
  display: block;
  margin-bottom: 12px;
}
.qitem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12px;
}
.qitem:last-child {
  margin-bottom: 0;
}
.quan {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #666;
  margin-right: 6px;
}
.pyi {
  position: relative;
  margin-left: 6px;
  top: 1px;
}
.chuan {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 50px;
}
.chuanleft {
  width: 46%;
  display: flex;
  flex-direction: column;
}
.chuanleft .el-upload-dragger {
  width: 100%;
}
/* 拍摄样式结束 */

.xmwj {
  height: 36px;
  background: #1c1d24;
  padding: 0 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 1px solid #30323b;
  border-bottom: 1px solid #30323b;
}
.xname {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
.shu {
  width: 1px;
  height: 14px;
  background: #9094a6;
  display: inline-block;
  margin: 0 14px;
}
.hui {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}
.xmright {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}
.icon_yq {
  width: 23px;
  height: 23px;
  margin-right: 8px;
}
.icon_zk_zhan {
  width: 18px;
  height: 18px;
  margin-left: 20px;
}
.ren {
  display: flex;
  flex-direction: row;
}
.renitems {
  /* width: 22px;
	height: 22px; */
  background: rgba(115, 48, 255, 1);
  /* background: #25262E; */
  border-radius: 50%;
  border: 1px solid #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  min-width: 22px;
  padding: 2px 4px;
  position: relative;
  margin-left: -4px;
}
.schaun {
  width: 105px;
  height: 27px;
  background: #0199e8;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  margin-left: 40px;
}

.wenview {
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
  overflow-y: scroll;
  height: 100%;
}

.wenitems {
  display: flex;
  flex-direction: column;
}
.wenhead {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.wenname {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}
.sjiao {
  width: 15px;
  height: 10px;
  transform: rotate(180deg);
  margin-left: 5px;
}
.wens {
  /* width: 133px;
	height: 114px; */
  position: relative;
  max-width: 180px;
  margin: 0 30px 30px 0;
  /* padding: 20px; */
  cursor: pointer;
}
.img_bj {
  position: absolute;
  width: 100%;
  height: 100%;
}
.wjhead {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 23px 10px 12px;
}
.wjleft {
  width: 65px;
  height: 55px;
  /* background: #1C1D24; */
  /* border-radius: 5px; */
  /* border: 1px solid #30323B; */
  position: relative;
}
.img_wjs {
  position: absolute;
  width: 100%;
  height: 100%;
}
.itemswj {
  position: relative;
  width: 100%;
  height: 100%;
  /* padding: 23px 10px 8px; */
}
.wenbot {
  /* background: #272830; */
  border-radius: 0px 0px 5px 5px;
  border-top: 1px solid #30323b;
  /* padding: 8px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 3px 3px 0;
  padding: 8px;
}
.icon_gds {
  margin-left: auto;
  width: 14px;
  height: 14px;
}
.botleft {
  display: flex;
  flex-direction: column;
}
.img_sc {
  width: 36px;
  height: 28px;
  margin-left: 13px;
}
.botname {
  font-weight: 300;
  font-size: 10px;
  color: #ffffff;
}
.bottime {
  font-weight: 300;
  font-size: 10px;
  color: #9094a6;
  display: block;
  margin-top: 3px;
}
.wenjjia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.paisheitem {
  background: rgba(28, 29, 36, 1);
  border-radius: 5px;
  padding: 11px 9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.sheleft {
  width: 90px;
  height: 51px;
  position: relative;
}
.tuimg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.good {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 2px 8px;
  position: absolute;
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.xing {
  width: 5px;
  height: 5px;
  background: #0199e8;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.goodname {
  font-weight: 400;
  font-size: 11px;
  color: #ffffff;
}
.sheright {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  width: 67%;
  padding-left: 10px;
  padding-top: 5px;
}
.shename {
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
}
.shiview {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
}
.icon_sj {
  width: 11px;
  height: 11px;
  margin-right: 5px;
}
.times {
  font-weight: 400;
  font-size: 12px;
  color: #cccccc;
  line-height: 13px;
}

.qies {
  width: 15px;
  height: 56px;
  cursor: pointer;
  position: absolute;
  right: -15px;
  top: 45%;
  z-index: 100;
}
.qiesright {
  width: 15px;
  height: 56px;
  cursor: pointer;
  position: absolute;
  left: -15px;
  top: 45%;
  z-index: 100;
}
.rone {
  padding: 20px;
}
.pfen {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
.plname {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  display: block;
  margin-bottom: 14px;
}
.pf {
  background: #272830;
  border-radius: 5px;
  border: 1px solid #30323b;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
}
.fens {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}
.fshu {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}
.xings {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}
.cjitems {
  display: flex;
  flex-direction: row;
}
.cjiitems {
  width: 30%;
  height: 61px;
  background: #272830;
  border-radius: 5px;
  border: 1px solid #30323b;
  position: relative;
  margin-right: 3%;
}
.heng {
  width: 100%;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px 5px 0 0;
  color: rgba(144, 148, 166, 1);
}
.cjian {
  position: relative;
  background: #1c1d24;
  border-radius: 0px 0px 5px 5px;
  border: 1px solid #30323b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}
.tanfu {
  position: absolute;
  height: 300px;
  width: 300px;
  background-color: #fff;
}
.peihead {
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.bqian {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.biaotit {
  color: #fff;
  font-size: 14px;
  font-weight: normal;
}
.shang {
  width: 15px;
  height: 10px;
  margin-left: 5px;
}
.xuan {
  transform: rotate(180deg);
}
.gaishu {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-top: 1px solid rgba(48, 50, 59, 1);
  margin-top: 40px;
}
.gaiitem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}
.gbiao {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  display: block;
  margin-bottom: 14px;
}
.gname {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}
.gnval {
  margin-left: auto;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
.kong {
  flex: 1;
  width: 100%;
  height: 260px;
  position: relative;
}
.kongitem {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #272830;
}
.kongnav {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.live {
  height: 60px;
  position: relative;
}
.novideo {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #c5c7d4;
  margin-top: 12px;
}

.list__wrapper {
  max-height: 60%;
  overflow: auto;
  background: #0a0b0d;
}
.shailist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
}
.sitem {
  display: inline-block;
  width: calc(49% - 2px);
  height: 141px;
  margin-right: 8px;
  margin-bottom: 17px;
  box-sizing: border-box;
  border: 2px solid transparent;
}
.sitem:nth-child(even) {
  margin-left: auto;
  margin-right: 0;
}
.cover {
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-color: #272830;
  height: 70%;
  background-image: url('https://1254282237.vod2.myqcloud.com/bc7a5dcevodtranscq1254282237/b5cbf2a95576678022662421609/coverBySnapshot/coverBySnapshot_10_0.jpg');
}
.videoview {
  width: 100%;
  height: 260px !important;
  position: relative;
}
.tag {
  position: absolute;
  padding: 4px 8px;
  right: 8px;
  top: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dot {
  background-color: rgb(52, 104, 254);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.dotname {
  font-weight: 400;
  font-size: 12px;
  color: #fff;
}
.time {
  position: absolute;
  padding: 4px;
  left: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
  color: #9094a6;
}
.info {
  height: 30%;
  background: #1c1d24;
  padding: 0 8px;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.file-name {
  width: 60%;
  font-weight: 500;
  font-size: 14px;
  color: #c5c7d4;
  display: inline-block;
}
.detailicon {
  width: 15px;
  height: 15px;
  margin-left: auto;
}
.shai {
  height: 48px;
  background: #1c1d24;
  padding: 0 16px;
  overflow: auto;
}
.placement-list {
  width: 80%;
  height: 100%;
  display: flex;
  line-height: 48px;
  overflow-x: scroll;
}
.item {
  display: inline-block;
  margin-right: 24px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  position: relative;
  min-width: 36px;
  max-width: 56px;
  text-align: center;
}
.item.is-active:after {
  display: block;
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 36px;
  background: #3468fe;
  z-index: 10;
}
</style>

<style>
.chuanleft .el-upload-dragger {
  width: 100%;
}
.chuanleft .el-upload {
  width: 100%;
}
.rone .el-input__inner {
  background-color: #272830;
  border: 1px solid #272830;
  color: #fff;
}
.rone .el-textarea__inner {
  background-color: #272830;
  border: 1px solid #272830;
  color: #fff;
}
</style>
